<template>
    <!-- 导航栏区域 -->
    <div class="nav">
        <!-- 
            RouterLink:作用是实现页面之间的导航，类似于HTML中<a>标签，但是RouterLink更多的是具有vue-router的特性和功能。
        -->
        <ul>
            <li>
                <!-- 
                    to：跳转对应路径，第一种写法：字符串跳转
                -->
                <RouterLink to="/home" class="a">首页</RouterLink>
            </li>
            <li>
                <!-- 
                    第二种写法，对象跳转
                -->
                <RouterLink :to="{path:'/user'}" class="a">用户</RouterLink>
            </li>
            <li>
                <!-- 通过名称跳转 -->
                <RouterLink :to="{name:'role'}" class="a">角色</RouterLink>
            </li>
            <li>
                <!-- 通过名称跳转 -->
                <RouterLink :to="{name:'goods'}" class="a">商品</RouterLink>
            </li>
        </ul>
    </div>
    <hr>
    
    <!-- 展示区域 -->
    <div class="main">
        <!-- 
            RouterView：用来展示当前路由对应的组件的组件，它是整个路由系统的核心显示部分。
            会根据路由路径，把匹配的组件渲染到页面上。
        -->
        <RouterView></RouterView>
    </div>

</template>

<script setup lang="ts" name="App">
import { RouterView } from 'vue-router';


</script>

    
<style scoped>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

li {
    display: inline;
    margin-right: 5px;
}
.a{
    font-size: 20px;
}
.a:link,
.a:visited {
    font-weight: bold;
    color: #008c8c;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

.a:hover,
.a:active {
    background-color: #008c8c;
    color: #fff;
}
.left-nav{
    height: 30px;
}
.left-nav a{
    margin: 10px;
}

</style>
